<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="UTF-8">
    <title>对象的动态绑定class(对象语法)</title>
  </head>
  <style>
    .active {
      color: red;
    }

    .line {
      border: 1px solid blue
    }
  </style>

  <body>
    <div class="app">
      <!-- <h1 v-bind:class="key1:value,key2:value2">{{message}}</h1> -->
      <!--
        class的对象语法
          要绑定的class个数确定，名字确定，但是不确定用不用
      -->
      <h1 v-bind:class={active:isActive,line:isLine}>{{message}}</h1>
      <h1 v-bind:class="getClass()">{{message}}</h1>
      <button v-on:click="btnClick">点击</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: ".app",
        data() {
          return {
            message: "你好，世界",
            isActive: true,
            isLine: true
          }
        },
        methods: {
          btnClick: function () {
            this.isActive = !this.isActive;
          },
          getClass: function () {
            return {
              active: this.isActive,
              line: this.isLine
            };
          }
        },
        computed: {

        }
      });
    </script>
  </body>

</html>